<template>
    <li>
        <div class="item-box" :style="{paddingLeft: number*20 + 'px'}">
            <Checkbox v-model="item.checked" @on-change="onChange">{{item[keys['name']]}}</Checkbox>
        </div>
        <ul v-if='isFolder'>
            <item v-for="(menu, index) in item[keys['children']]" :key="index" :item="menu" :keys="keys" :layer="number" @checked-event="checkedEvent"></item>
        </ul>
     </li>
</template>
<script>
    export default {
        name: 'item',
        props: [
            'item',
            'layer',
            'keys'
            ],
        data() {
            return {
            }
        },
        computed: {
            isFolder: function() {
                return !!this.item[this.keys['children']].length;
            },
            number: function(){
                return this.layer + 1;
            }
        },
        methods: {
            // 点击checked事件
            onChange: function (checked) {
                var checked = this.item.checked;
                if(checked){
                    this.$emit('checked-event');
                }

                this.childrenChecked();
            },
            // 设置父节点checked属性为true
            checkedEvent(){
                if(!this.item.checked){
                    this.item.checked = true;
                    this.$emit('checked-event');
                }
            },
            // 递归设置子节点checked为false
            childrenChecked(){
                var tree = this.item.children;
                var checked = this.item.checked;

                foreachTree(tree);

                // 遍历tree结构
                function foreachTree(tree){
                    var len = tree.length;
                    for(var i=0; i<len; i++){
                        tree[i].checked = checked;
                        foreachTree(tree[i].children);
                    }
                }
            }

        }
    }
</script>
<style scoped>
ul {
    overflow: hidden;
    transform-origin: 0 0;
}
li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.item-box {
    position: relative;
    color: #515a6e;
    list-style-type: none;
    padding: 6px 10px 6px 0;
    font-size: 14px;
    cursor: pointer;
}
.item-box:hover {
    color: #2d8cf0;
}
.item-box.active {
    color: #2d8cf0;
    background: #f0faff;
    z-index: 2;
}
.item-box.active:after {
    content: '';
    display: block;
    width: 2px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    background: #2d8cf0;
}
.iconRotate {
    transform: rotate(180deg);
}
/*动画效果*/
.slide-up-enter,
.slide-up-leave {
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
}
.slide-up-enter {
    animation-name: SlideUpIn;
    opacity: 0;
}
.slide-up-leave {
    animation-name: SlideUpOut;
}
@keyframes SlideUpIn {
    0% {
        opacity: 0;
        transform-origin: 0 0;
        transform: scaleY(.8);
    }

    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scaleY(1);
    }
}

@keyframes SlideUpOut {
    0% {
        opacity: 1;
        transform-origin: 0 0;
        transform: scaleY(1);
    }

    100% {
        opacity: 0;
        transform-origin: 0 0;
        transform: scaleY(.8);
    }
}
</style>